<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref, onUnmounted } from 'vue'
import { loginFn } from '@/api/login'
import router from '@/router'

// 校验
const formRef = ref()

// 是否点击了按钮？
const isClick = ref(false)

// 创建了一个实时更新的form对象，用来获取登录信息、记住我
const form =  reactive({
  id: '',
  password: '',
  remember: false
})

// 组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
  if (replaceId) {
    clearInterval(replaceId);
    replaceId = null;
  }
});

// 是否加载
const isLoading = ref(false)
const loadingText = ref('登 录 中 .')
let timerId = null; // 定时器ID
let replaceId = null

// 判断是否进行了输入操作
const rules = {
  id: [
    // 如果没有输入，就提示message信息，下同
    { required: true, message: '请输入账号' }
  ],
  password: [
    { required: true, message: '请输入密码' }
  ]
}

// 调用函数
function userLogin() {

  // 判断是否验证成功
  formRef.value.validate((isValid) => {

    if (isValid) {
      loginFn(form.id, form.password, form.remember, () => {
        // 显示效果
        isLoading.value = true
        // 禁用按钮
        isClick.value = true

        let dotCount = 1; // 点号计数器

        // 设置定时器来更新登录提示文本
        timerId = setInterval(() => {
          dotCount = (dotCount + 1) % 4; // 循环增加点号数量，当到达4时重置为1
          loadingText.value = '登 录 中 ' + '. '.repeat(dotCount); // 根据计数器重复点号
        }, 500); // 每0.5秒更新一次

        replaceId = setTimeout(() => {
          isLoading.value = false; // 加载完成后设置为false
          router.replace('/index'); // 跳转到index页面
        }, 2000); // 2秒后跳转，你可以根据需要调整这个时间
      })
    }
  })
}

</script>

<template>
  <div class="login">
    <div>
      <h1 class="loginTitle">登录</h1>
      <h5 class="loginTips">这是个提示信息，后续三元判断</h5>
    </div>

    <div class="loginInput">

      <!-- 判断是否填写了账号密码 -->
      <el-form :model="form" :rules="rules" ref="formRef">

        <!-- 这个是用户名和密码 -->
        <el-form-item prop="username">
          <el-input v-model="form.id" maxlength="10" type="text" placeholder="请输入你的账号">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="form.password" minlength="6" maxlength="20" type="password" placeholder="请输入你的密码">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-row>
          <el-col :span="12" style="text-align: left;">
            <el-form-item prop="remember">
              <el-checkbox v-model="form.remember" label="记住我"/>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12" style="text-align: right;">-->
<!--            <el-link @click="router.push('/reset')">忘记密码</el-link>-->
<!--          </el-col>-->
        </el-row>
      </el-form>

    </div>

    <!-- 登录 -->
    <div class="loginButton">
      <el-button :disabled="isClick.value" @click="userLogin" style="width: 24vw;margin-top: 36px;" type="success" plain>立即登录</el-button>
    </div>

    <!-- 毛玻璃效果和遮罩层 -->
    <div v-if="isLoading" class="blur-overlay">
      <!-- 加载中的提示信息 -->
      <h1 style="font-weight: normal;font-size: 56px">{{ loadingText }}</h1>
    </div>
    <div v-if="isLoading" class="disable-clicks"></div>
  </div>
</template>

<style>
.login{
  text-align: center;
  margin: 1vw 1vw 0 1vw;
}

.loginTitle{
  font-size: 38px;
  font-weight: 500;
}

.loginTips{
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.loginInput{
  width: 50vw;
  margin: 5vw auto;
}

/* 毛玻璃 */
.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)); /* 红色到绿色的渐变 */
  backdrop-filter: blur(60px); /* 毛玻璃效果 */
  z-index: 9999; /* 确保覆盖在其他元素之上 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease; /* 过渡效果 */
}

/* 禁止点击 */
.disable-clicks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998; /* 确保在毛玻璃效果之下 */
  cursor: not-allowed; /* 设置禁止点击的光标 */
}
</style>